import React from 'react'
// import ProgressView from "../../view/ProgressView";
// import PressTouch from '../../view/PressTouch'
import { MyButton } from '../../view/MyButton'
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { TaskRemain } from '../../view/TaskView'
import { Debt } from "../../const/imgs";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
var map, geolocation;
class ContactWay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  componentDidMount() {
    // new window.AMap.Map(

    //   this.refs.map2,

    //   this.state.gaodeConfig

    //   );
    const that = this
    //加载地图，调用浏览器定位服务
    map = new window.AMap.Map(this.refs.map2, {
      resizeEnable: true,
      zoom: 8,
    });
    map.plugin('AMap.Geolocation', function () {
      geolocation = new window.AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        buttonOffset: new window.AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition: 'RB'
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      window.AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
      window.AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
    //解析定位结果
    function onComplete(data) {
      let str = {}
      str.lng = data.position.getLng()
      str.lat = data.position.getLat()
      str.accuracy = data.accuracy
      str.isConverted = data.isConverted
      that.setState(str)
    }
    //解析定位错误信息
    function onError(data) {
    }
  }
  navigateTo = (e) => {
    var that = this
    var target = e
    var map = new window.AMap.Map(this.refs.map2, {
      resizeEnable: true
    });
    var geocoder = new window.AMap.Geocoder({
      city: "", //城市，默认：“全国”
      radius: 1000 //范围，默认：500
    });
    //地理编码,返回地理编码结果
    geocoder.getLocation(target, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // geocoder_CallBack(result);
      }
      const lat = result.geocodes[0].location.getLat()
      const lng = result.geocodes[0].location.getLng()
      const URI = 'http://uri.amap.com/marker?position=' + lng + ',' + lat + '&name=' + target + '&src=mypage&coordinate=gaode&callnative=0'
      // const URI= 'iosamap://navi?sourceApplication=applicationName&poiname=fangheng&poiid=BGVIS&lat=36.547901&lon=104.258354&dev=1&style=2'
      // window.open(URI)
      window.location.href = URI
    });
  }
  render() {
      const {expiredDays, debtorInfo ,} = this.props
      const {task_info} = this.props.TaskData
      return (
      <div style={{ marginTop: '-10px' }}>
        <Zhaiwuren debtorInfo={debtorInfo} navigateTo={this.navigateTo} />
        <Relations debtorInfo={debtorInfo} />
       {
         task_info&&task_info.status === 1&& 
         <TaskRemain expiredDays={expiredDays} />
         }
        <div ref='map2'></div>
      </div>
    )
  }
}

const Zhaiwuren = ({
  navigateTo,
  debtorInfo: {
    name, // 债务人姓名
    gender, // 债务人性别
    phone, // 债务人联系电话
    ID_addr_detail, // 户籍地址
    usual_addr_detail,    // 常住地址
    office_addr_detail,   // 公司地址
    ec_addr_detail,       // 电商地址

  }
}) => {
  return (
    <div style={{ color: Config.fontColor }} >


      <div className={styles['debt_title']} >
        <img src={Debt.ZWRXX} />
        债务人信息
      </div>
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']}>
          <div className={styles['debt_data_name']}>
            {name && name}
            <img src={gender === '女' ? Debt.W : Debt.M} style={{ marginLeft: '5px', width: '13px' }} alt='' />
          </div>
          <div className={styles['debt_data_phone']}>
            <img src={Debt.SJ} style={{ marginRight: '5px', width: '10px' }} alt='' />
            {phone && <a href={"tel:"+phone}>{phone}</a>}
            <img src={Debt.DH} style={{ marginLeft: '5px', width: '18px' }} alt='' />
          </div>
        </div>
        {ID_addr_detail && ID_addr_detail.length > 0 &&
          <Address
            name='户籍地址'
            value={ID_addr_detail}
            navigateTo={navigateTo}
          />}
        {usual_addr_detail && usual_addr_detail.length > 0 &&
          <Address
            name='常住地址'
            value={usual_addr_detail}
            navigateTo={navigateTo}
          />}
        {office_addr_detail && office_addr_detail.length > 0 &&
          <Address
            name='公司地址'
            value={office_addr_detail}
            navigateTo={navigateTo}
          />}
        {ec_addr_detail && ec_addr_detail.length > 0 &&
          <Address
            name='电商地址'
            value={ec_addr_detail}
            navigateTo={navigateTo}
          />}
      </div>

    </div>
  )
}

const Address = ({ name, value, navigateTo }) => {
  return (
    <div className={styles['debt_data_addr']}>
      <div
        className={styles['debt_key']}
        style={{
          height: '14px',
          margin: '5px 0',
          lineHeight: '14px',
          borderLeft: '2px solid #fd9e04',
          paddingLeft: '5px',
          textAlign:'left'
        }}
      >
        {name}
      </div>
      <div className={styles['debt_data_between']}
      >
        <span className={styles['debt_value']}>{value}</span>
        <MyButton
          style={navButtonStyle}
          name={"导航"}
          onClick={() => {
            navigateTo(value)
          }}
        />
      </div>
    </div>
  )
}
const Relations = ({
  debtorInfo: {
    father_name,      // 父亲名字及电话
    father_phone,
    mother_name,      // 母亲名字及电话
    mother_phone,
    spouse_name,      // 配偶名字及电话
    spouse_phone,
    child_name,           // 孩子名字及电话
    child_phone,
    other1_name,          // 其他联系人名字及电话
    other1_phone,
  }
}) => {
  return (
    <div>
      <div className={styles['debt_title']} >
        <img src={Debt.ZWRXX} />
        其他信息
      </div>
      {father_name && father_name.length > 0 &&
        <RelationShip name={father_name} phone={father_phone} relation='父亲' />}

      {mother_name && mother_name.length > 0 &&
        <RelationShip name={mother_name} phone={mother_phone}  relation='母亲'/>
      }
      {spouse_name && spouse_name.length > 0 &&
        <RelationShip name={spouse_name} phone={spouse_phone} relation='配偶' />
      }
      {child_name && child_name.length > 0 &&
        <RelationShip name={child_name} phone={child_phone}  relation='子女'/>
      }
      {other1_name && other1_name.length > 0 &&
        <RelationShip name={other1_name} phone={other1_phone}  relation='其他'/>
      }
    </div>

  )
}
const RelationShip = ({ name, phone,relation }) => {
  return (
    <div className={styles['debt_item']} style={{ color: Config.fontColor, marginBottom: '10px' }} >
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']}>
          <div className={styles['debt_data_name']}>
            {name}
            <img src={Debt.M} style={{ marginLeft: '5px', width: '13px' }} alt='' />
          </div>
          <div style={{ fontSize: '12px', color: Config.fontColor1 }} >
            {relation}
          </div>
          <div className={styles['debt_data_phone']}>
            <img src={Debt.SJ} style={{ marginRight: '5px', width: '10px' }} alt='' />
            {phone && <a href={"tel:"+phone}>{phone}</a>}
            <img src={Debt.DH} style={{ marginLeft: '5px', width: '18px' }} alt='' />
          </div>
        </div>
      </div>
    </div>
  )
}

const navButtonStyle = {
  color: "#fff",
  background: Config.BaseColor,
  height: '24px',
  borderRadius: '12px',
  boxSizing: 'border-box',
  padding: '0 15px',
  fontSize: '12px',
  lineHeight: '24px',
  width: '60px',
  whiteSpace:'nowrap'
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    setData(data){
      let params = {
        TaskData: data
      };
      dispatch(Actions.actionTaskData(params));
    },
    TaskDetailTab(item) {
      let params = {
        taskDetailTabIndex: item.taskDetailTabIndex
      };
      dispatch(Actions.actionTaskDetailTab(params));
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ContactWay);
